<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/CirleHover.css"/>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="./js/CirleHover.js"></script>
</head>
<body>
<div class="container">
    <div class="top">
        <a href=""><strong>« Previous Demo: </strong>Animated Responsive Image Grid
        </a>
        <span>
            <a href=""><strong>Back to the Codrops Article</strong></a>
        </span>
    </div>
    <div class="header">
        <h1><strong>Circle</strong> Hover Effects</h1>
        <h2>Pretty hover effects on circles with CSS Transitions</h2>
        <nav class="nav">
            <a href="">Demo 1</a>
            <a href="">Demo 2</a>
            <a href="">Demo 3</a>
            <a href="">Demo 4</a>
            <a href="">Demo 5</a>
            <a href="">Demo 6</a>
            <a href="">Demo 7</a>
        </nav>
    </div>
    <div class="main">
        <ul>
            <li>
                <div class="mian-img main-img-1">
                    <div class="main-img-in">
                        <div class="main-in " id="main-in-1">
                            <div class="main-in-c main-in-1" id="main-img-1">
                                <h3>Bears Type</h3>
                                <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
                            </div>
                            <div class="mian-img main-in-d " id="main-img-2">

                            </div>

                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="mian-img main-img-1">
                    <div class="main-img-in">
                        <div class="main-in " id="main-in-2">
                            <div class="main-in-c main-in-1" id="main-img-3"></div>
                            <div class="mian-img main-in-d " id="main-img-4"></div>

                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="mian-img main-img-1">
                    <div class="main-img-in">
                        <div class="main-in " id="main-in-3">
                            <div class="main-in-c main-in-1" id="main-img-5"></div>
                            <div class="mian-img main-in-d " id="main-img-6"></div>

                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
</div>
</body>
</html>